<%--@elvariable id="countStudy" type="java.lang"--%>
<%--@elvariable id="countStudyTime" type="java.lang.String"--%>
<%--@elvariable id="user" type="com.genghis.ptas.security.entity.User"--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <%@include file="../../common.jsp" %>
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-fileinput/bootstrap-fileinput.css"/>
    <!-- END PAGE LEVEL STYLES -->
    <!-- BEGIN THEME STYLES -->
    <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="assets/css/pages/profile.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->
    <style type="text/css">
        .page-content {
            margin-left: 0 !important;
        }

        body {
            background-color: white !important;
        }

        .showCount {
            background: none repeat scroll 0 0 #f0f6fa;
            border-left: 2px solid #c4d5df;
            color: #557386;
            display: block;
            font-size: 14px;
            margin-bottom: 1px;
            padding: 8px 10px;
        }
    </style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<!-- BEGIN CONTENT -->
<div class="page-content">
    <div class="row">
        <div class="col-md-3">
            <ul class="list-unstyled profile-nav">
                <li>
                    <img src="${user.userBaseInfo.photoUrl}" style="width: 235px" class="img-responsive" alt=""/>
                </li>
                <li>
                    <a href="person/myInfo" class="showCount">
                        <i class="fa fa-cogs"></i>&nbsp;个人基本信息
                    </a>
                </li>
            </ul>
        </div>

        <div class="col-md-9">

            <div class="row">
                <div class="col-md-8 profile-info">
                    <h1>${user.userName}</h1>

                    <p>
                        <%--个人说明--%>
                    </p>

                    <p>
                        <a href="javascript:">
                            ${user.userBaseInfo.email}
                        </a>
                    </p>
                    <ul class="list-inline">
                        <li>
                            <i class="fa fa-map-marker"></i> ${user.userBaseInfo.address}
                        </li>
                        <li id="centerFriend">
                            <i class="fa fa-users"></i>
                        </li>
                        <li id="centerEmail">
                            <i class="fa fa-envelope"></i>
                        </li>
                        <li id="centerCollect">
                            <i class="fa fa-star"></i>
                        </li>
                        <li id="centerRegister">
                            <i class="fa fa-heart"></i>
                        </li>

                    </ul>
                </div>
                <!--end col-md-8-->
                <div class="col-md-4">
                    <div class="portlet sale-summary">
                        <div class="portlet-title">
                            <div class="caption">
                                本月学习统计
                            </div>
                            <div class="tools">
                                <a class="reload" href="javascript:">
                                </a>
                            </div>
                        </div>
                        <div class="portlet-body">
                            <ul class="list-unstyled">
                                <li>
                        <span class="sale-info">
                             本月学习课件数量 <i class="fa fa-img-up"></i>
                        </span>
                        <span class="sale-num">
                            ${countStudy}
                        </span>
                                </li>

                                <li>
                        <span class="sale-info">
                             学习总时间
                        </span>
                        <span class="sale-num">
                            ${countStudyTime}
                        </span>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <!--end col-md-4-->
            </div>
            <!--end row-->
            <div class="tabbable tabbable-custom tabbable-custom-profile">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#tab_1_11" data-toggle="tab">
                            课件统计信息
                        </a>
                    </li>
                    <li>
                        <a href="#tab_1_22" data-toggle="tab">
                            我的好友信息
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1_11">
                        <div class="portlet-body">
                            <iframe id="userStatisticIframe" src="person/userStatisticInfoDo"
                                    style="border: none;width:750px;height:670px;" frameBorder="0"></iframe>
                        </div>
                    </div>
                    <!--tab-pane-->
                    <div class="tab-pane" id="tab_1_22">
                        <div class="tab-pane active" id="tab_1_1_1">
                            <div class="scroller" data-height="290px" data-always-visible="1" data-rail-visible1="1">
                                <iframe id="friendInfo" src="friend/myFriendDo"
                                        style="border: none;width:750px;height: 100%" frameBorder="0"></iframe>
                            </div>
                        </div>
                    </div>
                    <!--tab-pane-->
                </div>
            </div>

        </div>
    </div>
</div>
<!-- END CONTENT -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script type="text/javascript" src="assets/plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="assets/scripts/core/app.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
    jQuery(document).ready(function () {
        // initiate layout and plugins
        App.init();
        parent.browserSizeDeal(1, document.body.clientHeight + 80);
        $("#centerFriend").append("" + top.$("#countFriend").html() + "个好友");
        $("#centerEmail").append("" + top.$("#countInbox").html() + "个未读邮件");
        $("#centerRegister").append("" + top.$("#allRegister").html() + "个注册");
        $("#centerCollect").append("" + top.$("#allCollect").html() + "个收藏");
    });

    function initFriendHeight(height) {
        $("#friendInfo").height(height);
    }

</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>